<template>
	<view class="container">
		<view v-if="cartList.length == 0" class="no-content">
			<text>购物车中没有商品，快去添加商品吧</text>
			<view class="go-btn bottom-change-view" @click="clickShopping">去逛逛</view>
		</view>
		<view v-else class="list-item-container">
			<view class="list-item" v-for="(item, index) in cartList" :key="index">
				<delSlideLeft :item="item" :data_transit="{ index: index, item: item }" @delItem="delItem" style="width: 100%;">
					<view class="list-item-slide">
						<view class="list-item-left"><radio :checked="item.checked" @click="clickCheckbox(item.checked, index)" /></view>
						<view class="list-item-middle"><view class="list-item-middle-img" :style="{ backgroundImage: 'url( ' + item.imgUrl + ' )' }"></view></view>
						<view class="list-item-right">
							<view class="list-item-right-title">{{ item.goodsName }}</view>
							<view class="list-item-right-bottom">
								<view class="price-container">
									<text class="unit">￥</text>
									<text class="price">{{ item.price }}</text>
								</view>
								<view class="add-car">
									<view class="sub-icon" @click="addGoods(0, item)">－</view>
									<input maxlength="5" type="number" v-model="item.amount" class="add-input" disabled="true" />
									<view class="add-icon" @click="addGoods(1, item)">+</view>
								</view>
							</view>
						</view>
					</view>
				</delSlideLeft>

				<!-- <view class="list-item-left"><radio :checked="item.checked" @click="clickCheckbox(item.checked, index)" /></view>
				<view class="list-item-middle"><view class="list-item-middle-img" :style="{ backgroundImage: 'url( ' + item.Img + ' )' }"></view></view>
				<view class="list-item-right">
					<view class="list-item-right-title">{{ item.Name }}</view>
					<view class="list-item-right-bottom">
						<view class="price-container">
							<text class="unit">￥</text>
							<text class="price">{{ item.Price }}</text>
						</view>
						<view class="add-car">
							<view class="sub-icon" @click="addGoods(0, item)">－</view>
							<input maxlength="5" type="number" v-model="item.Amount" class="add-input" disabled="true" />
							<view class="add-icon" @click="addGoods(1, item)">+</view>
						</view>
					</view>
				</view> -->
			</view>
		</view>
		<view class="bottom-view" v-if="cartList.length > 0">
			<view class="bottom-radio-all"><radio :checked="isCheckAll" @click="clickAll(isCheckAll)">全选</radio></view>
			<view class="bottom-operation-container">
				<view class="price-container">
					<text>合计：</text>
					<text style="font-size: 40rpx; color:#FE7904 ;">
						<text style="font-size: 24rpx;margin-right: 4rpx;">¥</text>
						{{ allPrice }}
					</text>
				</view>
				<view class="confirm-btn bottom-change-view" @click="toPlaceOrder()">去支付</view>
			</view>
		</view>
	</view>
</template>

<script>
import { isLogin, toLogin, successToShow, errorToShow, debounce } from '@/config/common.js';
import { getCartInfo, clearCart, deleteCart, addCart } from '@/constant/cart.js';
import delSlideLeft from '@/components/ay-operate/del_slideLeft.vue';
export default {
	components: { delSlideLeft },
	data() {
		return {
			isEdit: true,
			allPrice: 0.0,
			cartList: [],
			orderList: [],
			customerId: uni.getStorageSync('customerId'),
			noClick: true,
			isCheckAll: false
		};
	},
	onLoad: function(option) {
		if (isLogin()) {
			this.getCartInfo();
		} else {
			toLogin();
		}
	},
	methods: {
		addGoods(val, val1) {
			debounce(() => {
				if (val == 0) {
					if (val1.amount == 1) {
						this.delItem(val1)
						// addCart({
						// 	amount: 1,
						// 	goodsId: val1.goodsId,
						// 	goodsType:2,
						// 	storeId:0,
						// 	tableNumber:'',
						// });
						return;
					}
					val1.amount--;
					addCart({
						amount: -1,
						goodsId: val1.goodsId,
						goodsType:2,
						storeId:0,
						tableNumber:'',
					});
				} else {
					val1.amount++;
					addCart({
						amount: 1,
						goodsId: val1.goodsId,
						goodsType:2,
						storeId:0,
						tableNumber:'',
					});
				}
				this.countPrice();
			}, 500)();
		},
		delItem(delItemInfo) {
			const delItem = delItemInfo.item;
			let that = this;
			uni.showModal({
				title: '',
				content: '确定删除吗',
				success: function(res) {
					if (res.confirm) {
						deleteCart({
							ids: delItemInfo.id
						}).then(res=>{
							that.getCartInfo();
						});
					}
				}
			});
		},
		clickDelete() {
			let that = this;
			if (that.cartList.filter(item => item.checked).length == 0) {
				errorToShow('请选择要删除的商品');
				return;
			}
			uni.showModal({
				title: '',
				content: '确定删除吗',
				success: function(res) {
					if (res.confirm) {
						let ids = [];
						that.cartList.forEach(function(item) {
							if (item.checked) {
								ids.push(item.ProductId);
							}
						});
						if (ids.length > 0) {
							deleteCart({
								id: that.customerId,
								productids: ids
							});
							that.cartList = that.cartList.filter(item => !item.checked);
							that.countPrice();
						}
					}
				}
			});
		},
		clickShopping() {
			uni.navigateBack({
				delta: 1
			});
		},
		clickAll(val) {
			this.isCheckAll = !val;
			if (this.isCheckAll) {
				this.cartList.forEach(vm => {
					vm.checked = true;
				});
			} else {
				this.cartList.forEach(vm => {
					vm.checked = false;
				});
			}

			this.countPrice();
		},
		editCart() {
			this.isEdit = !this.isEdit;
			this.countPrice();
		},
		clickCheckbox(e, index) {
			for (let i = 0; i < this.cartList.length; i++) {
				let obj = this.cartList[i];
				if (index == i) {
					obj.checked = !e;
				}
			}
			this.countPrice();
		},
		countPrice() {
			this.allPrice = 0.0;
			this.orderList = [];
			this.cartList.forEach(element => {
				if (element.checked) {
					this.allPrice += Number(element.price * element.amount);
					this.orderList.push(element);
				}
			});
		},
		async getCartInfo() {
			let result = await getCartInfo({
				customerId: this.customerId
			});
			console.log(result,'----')
			this.cartList = result.data.rows;
		},
		toPlaceOrder() {
			if (this.orderList.length == 0) {
				errorToShow('请选择结算商品');
				return;
			}
			if (this.orderList.filter(item => item.IsEffect).length > 0) {
				errorToShow('存在失效商品');
				return;
			}
			let isVirtualLen = this.orderList.filter(item => item.IsVirtual).length;
			let noVirtualLen = this.orderList.filter(item => !item.IsVirtual).length;
			if (isVirtualLen > 0 && noVirtualLen > 0) {
				errorToShow('请把虚拟产品和实体产品分开结算');
				return;
			}
			uni.navigateTo({
				url: '/pages/mall/placeorder/index?orderInfo=' + encodeURIComponent(JSON.stringify(this.orderList))
			});
		}
	}
};
</script>

<style scoped lang="scss">
.container {
	background-color: $main-page-color;
	height: 100vh;
	overflow-y: auto;
}

.container::-webkit-scrollbar {
	display: none;
}

.no-content {
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;

	.go-btn {
		background-color: $main-theme-color-green;
		height: 80rpx;
		color: #fff;
		text-align: center;
		line-height: 80rpx;
		font-size: 30rpx;
		margin-top: 40rpx;
		width: 400rpx;
		border-radius: 40rpx;
	}
}

.list-item-container {
	padding-bottom: 140rpx;
}

.list-item-slide {
	padding: 30rpx;
	background-color: #fff;
	display: flex;
}

.list-item {
	display: flex;
	align-items: center;
	font-size: 28rpx;
	margin-top: 20rpx;

	.list-item-left {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 30rpx;
	}

	.list-item-middle {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 30rpx;
		&-img {
			width: 160rpx;
			height: 160rpx;
			border-radius: 16rpx;
			background-repeat: no-repeat;
			background-position: center;
			background-size: cover;
		}
	}

	.list-item-right {
		width: calc(100% - 230rpx);
		color: $main-text-color-gray-33;
		font-family: 'SourceHanSansCN-Medium';
		height: 160rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		&-title {
			font-size: $main-text-size-28;
		}
		&-bottom {
			width: 100%;
			display: flex;
			justify-content: space-between;
			.price-container {
				color: $main-text-color-main-orange;
				margin-right: 40rpx;
				.unit {
					font-size: $main-text-size-24;
				}
				.price {
					font-size: $main-text-size-32;
				}
			}

			.add-car {
				display: flex;
				align-items: center;
				font-family: 'SourceHanSansCN-Regular';
				color: $main-text-color-gray-33;
				.sub-icon {
					width: 48rpx;
					height: 48rpx;
					line-height: 48rpx;
					text-align: center;
					font-size: $main-text-size-32;
					border-radius: 8rpx;
					border: 2rpx solid #dbdbdb;
				}

				.add-icon {
					width: 48rpx;
					height: 48rpx;
					line-height: 48rpx;
					text-align: center;
					font-size: $main-text-size-40;
					background-color: $main-btn-orange-color-FCC309;
					border-radius: 8rpx;
				}

				.add-input {
					width: 80rpx;
					font-size: 28rpx;
					text-align: center;
					height: 50rpx;
				}
			}
		}
	}
}

.bottom-view {
	z-index: 999;
	height: 100rpx;
	width: 100%;
	background-color: #fff;
	color: $main-text-color-gray-33;
	display: flex;
	align-items: center;
	position: fixed;
	bottom: 0;
	justify-content: space-between;
	padding-bottom: 20rpx;
	box-shadow: 0px -1rpx 2rpx rgba(68, 68, 68, 0.16);
	.bottom-radio-all {
		display: flex;
		align-items: center;
		margin-left: 30rpx;
	}

	.bottom-operation-container {
		display: flex;
		margin-right: 30rpx;
		align-items: center;
		.price-container {
			margin-right: 40rpx;
		}

		.confirm-btn {
			padding: 18rpx 66rpx;
			color: #ffffff;
			border-radius: 38rpx;
			font-size: $main-text-size-32;
			border-radius: 100rpx;
		}
	}
}

.delete-btn {
	color: #ff0000;
	margin-left: 20rpx;
}
</style>
